<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!-- 首先要先能够生成一个随机的数字 -->
<!-- 然后需要在页面上有一个输入框 -->
<!-- 接下来还需要有一个“提交按钮” -->
<!-- 最后还得有区域来显示结果 -->

<input type="text">
<button>确定</button>
<div class="screen"></div>
<script>
  let input = document.querySelector('input');
  let screen = document.querySelector('.screen');
  //1.先生成一个随机的整数
  let toGuess =  Math.floor(100*Math.random()+1);
  console.log(toGuess);
  //2.针对按钮的点击操作，进行处理
  let button = document.querySelector('button');
  button.onclick = function(){
    //3.拿到输入框中的数值，然后和toGuess进行判定
    //针对输入框，使用value属性来获取到输入框中的内容
    //此时拿到的数值是一个字符串类型，转成整数
    let curNum = parseInt(input.value);
    if(isNaN(curNum)){
      screen.innerHTML = '输入非法';
      return;
    }
    if(curNum<toGuess){
      //猜低了
      screen.innerHTML = '猜低了';
    }else if(curNum>toGuess){
      //猜高了
      screen.innerHTML = '猜高了';
    }else{
      //猜对了
      screen.innerHTML = '猜对了';
    }
  }

</script>
</body>
</html>